<template>
  <div id="Formula">
    <div class="Formula_body">
      <div class="Formula_top">
        <div class="title">( {{ title }} )=</div>
        <div class="input_parent">
          <code-mirror ref="codeMirror" :checking-in.sync="checkingIn" :payment.sync="payment" />
        </div>
        <div class="formulaInput">
          <div>
            <el-button type="primary" class="btn" round size="medium" @click="checkFormula()" :loading="loading">校验公式</el-button>
            <span class="tis" v-show="hint">
              <span v-if="hint === true"><i class="el-icon-circle-check" style="color:#0BB27A"></i> 检验成功</span>
              <span v-else class="redColorFont"><i class="el-icon-error"></i> {{ hint }}</span>
            </span>
          </div>
          <span class="Operator">
            <span class="text">输入运算符</span>
            <span class="sign" v-for="(item, index) in operatorArr" :key="index" @click="addField(item, '4')">{{ item.label }}</span>
          </span>
        </div>
      </div>
      <div class="Formula_btm">
        <ul class="List">
          <li class="item">
            <div class="title"><span></span>考勤字段</div>
            <div class="project">
              <span class="project_item" v-for="(item, index) in checkingIn" :key="index" @click="addField(item, '1')">{{ item.name }}</span>
            </div>
          </li>
          <li class="item">
            <div class="title"><span></span>薪酬字段</div>
            <div class="project">
              <span class="project_item" v-for="(item, index) in payment" :key="index" @click="addField(item, '2')">{{ item.name }}</span>
            </div>
          </li>
          <li class="item">
            <div class="title"><span></span>函数</div>
            <div class="project">
              <span class="project_item" v-for="(item, index) in FUNC" :key="index" :title="item.text" @click="addField(item, '3')"
                >{{ item.name }}<span class="type">{{ item.type }}</span></span
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="Formula_footer">
      <slot v-if="$slots.default"></slot>
      <template v-else>
        <el-button size="medium">取 消</el-button>
        <el-button type="primary" size="medium" @click="checkFormula" :loading="loading">保 存</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import { operatorArr, FUNC } from "./config";
import codeMirror from "./codeMirror.vue";

export default {
  name: "CustomFormula",
  components: { codeMirror },
  data() {
    return {
      hint: "", //错误提示

      operatorArr, // 按钮
      checkingIn: [], // 考勤字段
      payment: [], // 薪酬字段
      FUNC, // 函数
      loading: false
    };
  },
  props: {
    title: {
      type: String,
      default: "绩效工资"
    }
  },
  methods: {
    setLoading(bol = false) {
      this.loading = bol;
      this.$emit("callbackLoading", bol);
    },
    async checkFormula(bol = false) {
      try {
        this.setLoading(true);
        this.clearHint();
        const o = await this.$refs.codeMirror.checkFormula(bol);
        this.setErrHint(true);
        return o;
      } catch {
        this.setErrHint("公式不正确");
      } finally {
        this.setLoading();
      }
    },
    addField(e, type) {
      this.$refs.codeMirror.addField(e, type);
    },
    callback(str = "") {
      // str = "如果(ROUNDUP(#加班次数#,2)>5 并且 ROUNDUP(#销售提成#,1)==3.2 或者 3>=2) 返回 ROUNDDOWN(5.13,2); 否则 返回 SUM(#全勤奖# ,#季度奖# );"
      console.log(str);
      this.$refs.codeMirror.callback(str || "");
    },
    // 操作
    ...{

      /** 设置错误提示 */
      setErrHint(hint) {
        this.hint = hint;
      },

      /** 清空公式 */
      clearContent() {
        this.code = "";
        this.clearHint();
      },

      /** 清空提示 */
      clearHint() {
        this.hint = "";
      }
    },

    // 获取
    ...{

      /** 获取字段信息 */
      async getData() {
        await this.$api.CustomFormula.GetCustomFormula().then(res => {
          let resData = res.data.data;
          this.checkingIn = resData.filter(res => {
            return res.type == 1;
          });
          this.payment = resData.filter(res => {
            return res.type == 2;
          });
          this.resData = resData;
        });
      }
    }
  },
  async mounted() {
    await this.getData();
    this.callback();
  }
};
</script>

<style lang="less">
#Formula {
  color: #333;
  .Formula_body {
    width: 90%;
    height: calc(100% - 45px);
    padding: 10px 0;
    min-width: 800px;
    margin-left: 5%;
    .Formula_top {
      width: 100%;
      height: 50%;
      border: 1px solid #e4e3e8;
      .title {
        height: 45px;
        line-height: 45px;
        background-color: #f5f8fd;
        border-bottom: 1px solid #e4e3e8;
        font-size: 15px;
        font-weight: 600;
        padding-left: 20px;
      }
      .input_parent {
        height: calc(100% - 85px);
        padding: 10px 8px;
        .formula_fz {
          font-size: 15px;
          color: #333;
        }
        .variable {
          color: #9278f4;
        }
        .FUNC {
          color: #22bcff;
        }
      }
      .formulaInput {
        position: relative;
        height: 40px;
        border-top: 1px solid #e4e3e8;
        display: flex;
        align-items: center;
        padding: 0 20px;
        .Operator {
          position: absolute;
          right: 10px;
          .sign {
            // width: 22px;
            height: 22px;
            display: inline-block;
            border: 1px solid #e4e3e8;
            text-align: center;
            line-height: 22px;
            margin-right: 5px;
            padding: 0 3px;
            cursor: pointer;
            &:hover {
              border: 1px solid #6292fa;
              color: #6292fa;
            }
          }
          .text {
            font-size: 14px;
            margin-right: 15px;
          }
        }
        .tis {
          font-size: 13px;
          margin-left: 10px;
        }
      }
      @keyframes cursor-blinks {
        0% {
          opacity: 1;
          display: block;
        }
        50% {
          opacity: 0;
          display: none;
        }
        100% {
          opacity: 1;
          display: block;
        }
      }
      .FocusSize {
        display: inline-block;
        width: 1px;
        height: 17px;
        background: #999999;
        position: relative;
        top: 3px;
        animation: cursor-blinks 1.5s infinite steps(1, start);
      }
    }
    .Formula_btm {
      width: 100%;
      height: calc(50% - 20px);
      margin-top: 20px;
      .List {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        .item {
          width: 32%;
          float: left;
          border: 1px solid #e4e3e8;
          .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #f5f8fd;
            font-size: 14px;
            padding-left: 20px;
            > span {
              display: inline-block;
              width: 2px;
              height: 15px;
              background-color: #6292fa;
              margin-right: 4px;
              position: relative;
              top: 3px;
            }
          }
          .project {
            width: 100%;
            height: calc(100% - 40px);
            overflow-y: auto;
            padding: 5px 0;
            .project_item {
              height: 30px;
              line-height: 30px;
              font-size: 13px;
              display: block;
              padding: 0 20px;
              cursor: pointer;
              &:hover {
                background-color: #f8fbff;
                color: #6292fa;
              }
              .type {
                float: right;
              }
            }
          }
        }
      }
    }
  }
  .Formula_footer {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #f5f5f5;
  }
}
</style>
